$(document).on('ready', function() {
    // 弹窗功能
        $(".fullbg").show();
        $(".note-mode-pannel").show();


        // 这里后台通过ajax将服务器上7天内的数据获取到recentMsg中，对列表进行渲染
        var recentMsg = [
            {
                id:0,
                writer:"潘玉娇",
                title:"五一放假通知五一放假通知五一放假通知",
                msg:"本报济南4月23日讯（记者 魏海政）“1928年，南京国民政府开始二次北伐，日本悍然出兵山东，蓄意挑起争端。1928年5月3日，在这间办公室里，到底发生了什么？让我们一起重温历史，再现那段血雨腥风的岁月。”今天，在山东城市建设职业学院举行的山东省“同城大课堂”“五三惨案”专题教学观摩活动中，该校思政课教师娄淑静简要讲解历史背景后，学生以情景剧的形式导入教学，真实立体地重现了91年前济南“五三惨案”的历史，激发了学生探究学习的兴趣。本报济南4月23日讯（记者 魏海政）“1928年，南京国民政府开始二次北伐，日本悍然出兵山东，蓄意挑起争端。1928年5月3日，在这间办公室里，到底发生了什么？让我们一起重温历史，再现那段血雨腥风的岁月。”今天，在山东城市建设职业学院举行的山东省“同城大课堂”“五三惨案”专题教学观摩活动中，该校思政课教师娄淑静简要讲解历史背景后，学生以情景剧的形式导入教学，真实立体地重现了91年前济南“五三惨案”的历史，激发了学生探究学习的兴趣。",
                date:"2019/04/10"
            },
            {
                id:1,
                writer:"辛识平",
                title:"五一放假通知",
                msg:"为贯彻落实党中央、国务院关于减证便民、优化服务的决策部署，根据《国务院办公厅关于做好证明事项清理工作的通知》要求，教育部结合教育领域工作实际，对各类证明事项进行了清理。经研究，现将有关事项通知如下。为贯彻落实党中央、国务院关于减证便民、优化服务的决策部署，根据《国务院办公厅关于做好证明事项清理工作的通知》要求，教育部结合教育领域工作实际，对各类证明事项进行了清理。经研究，现将有关事项通知如下。",
                date:"2019/04/8"
            },
            {
                id:3,
                writer:"鲍效农",
                title:"五一放假通知",
                msg:"五四运动100周年之际，中共中央政治局举行集体学习，回顾这场伟大的爱国革命运动，深刻把握当代中国青年运动的发展规律。“要回答好为什么当代中国青年运动的主题是为实现中华民族伟大复兴的中国梦而奋斗，为什么当代青年必须把个人理想融入民族复兴伟大理想和中国特色社会主义思想”，习近平总书记提出的明确要求，也是每一位新时代青年面临的人生考题。五四运动100周年之际，中共中央政治局举行集体学习，回顾这场伟大的爱国革命运动，深刻把握当代中国青年运动的发展规律。“要回答好为什么当代中国青年运动的主题是为实现中华民族伟大复兴的中国梦而奋斗，为什么当代青年必须把个人理想融入民族复兴伟大理想和中国特色社会主义思想”，习近平总书记提出的明确要求，也是每一位新时代青年面临的人生考题。五四运动100周年之际，中共中央政治局举行集体学习，回顾这场伟大的爱国革命运动，深刻把握当代中国青年运动的发展规律。“要回答好为什么当代中国青年运动的主题是为实现中华民族伟大复兴的中国梦而奋斗，为什么当代青年必须把个人理想融入民族复兴伟大理想和中国特色社会主义思想”，习近平总书记提出的明确要求，也是每一位新时代青年面临的人生考题。",
                date:"2019/04/12"
            }]

        recentMsg.forEach(function(item,index){
            item.index = index; // 给每一条数据加上序号，以对应其页码
        })


        var urlparmasId = sh.GetRequest();// 如果是首页点击滚动消息进入，用于控制打开时显示哪条数据，这个id应该为url带的参数，可通过sh.GetRequest获取，这里假定显示id=1的数据，该条数据index=2，所以一开始页码=2。后台不需改动。

        // console.log(sh.GetRequest()); // 获取url参数，转为json格式{id:xxx}

    //如果是锁屏状态，显示第一条数据。页码=1
        var currentPage=1;

        if(urlparmasId.id){
            recentMsg.forEach(function(item){
                if(item.id == urlparmasId.id){
                    currentPage = item.index+1;
                }
                // console.log(currentPage);
            })
        }
        // 这个currentPage是点击首页的那条数据对应的index,这样打开页面才能直接显示点击的那条数据
        sh.createList(recentMsg,1,".note-mode-pannel-ul","",currentPage);


// 关闭弹窗
    $(".note-mode-pannel").on("click",".exit-btn",function () {
        history.go(-1);
    })
})




// 翻页回调，对数据进行个性化渲染，targetUl是装载数据的容器，startIndex是第一条数据的id，endIndex是最后一条数据的id，data是获取到的数据,defaultImgUrl是默认图片
function getDataAndSortCallback(targetUl,startIndex,endIndex,data,defaultImgUrl){

    // 后台可在此通过发送startIndex、endIndex两个参数获取当前页的数据，用于服务端分页
    // ...
    var indexRange = endIndex-startIndex; // 需总共请求的数据条数
    var contentHtml = "";
    for (var j = startIndex; j < endIndex; j++){ // 服务器端分页改为for(var j=0; j < indexRange; j++)

        // 通过li上的index获取该条数据的id
        contentHtml += '<li index="'+ data[j].id +'"><div class="note-pannel-top-msg"><div class="note-pannel-top-left">'+ data[j].title +'</div>  <div class="note-pannel-top-right"><div class="datetime">'+data[j].date +" "+sh.getWeek(new Date(data[j].date).getDay())+'</div> <div class="writer">'+data[j].writer +'</div></div></div> <div class="note-content swiper-container"><div class="swiper-scrollbar"></div><div class="swiper-wrapper"><div class="swiper-slide">'+data[j].msg +'</div></div></div></li>';

    }
    targetUl.append(contentHtml);
    // 初始化文章上下滑动显示功能

    var mySwiper = new Swiper('.swiper-container',{
        scrollContainer: true,
        scrollbar: {
            container: '.swiper-scrollbar'
        },
        mode: 'vertical'
    })

}
